<template>
    <div class="main-register-step3" :style="{paddingBottom: `${paddingBottom}px`}">
        <van-image width="100%" :src="phone3" class="img" />
        <div class="form">
            <h3>Enter Verification Code</h3>
            <div class="tip">We have sent SMS to: </div>
            <div class="tip">{{form.phoneNum}}</div>
            <section @click="showKeyboard = true">
                <div :class="{'input': true, 'no-data': item === null}" v-for="(item,index) in rows" :key="index">{{item}}</div>
            </section>
            <van-number-keyboard
                :maxlength="len"
                v-model="form.code"
                :show="showKeyboard"
                @blur="showKeyboard = false"
            />
            <van-form @submit="onSubmit" @failed="onFailed" :show-error-message="false">
                <van-field
                    v-show="false"
                    v-model="form.code"
                    name="code"
                    :rules="[{ required: true, message: 'Code is required'}, {validator: vaildCode, message: 'Code does not match!'}]"
                />
                <div style="margin: 0px 0px 20px 0px">
                    <van-button round block type="primary" native-type="submit"><strong>Sign Up</strong></van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { inject, ref, watch } from 'vue'
import phone3 from '../../assets/phone-3.png'

const len = 5

const paddingBottom = ref(0)

const {form} = defineProps({ 
    form: {
        type: Object as () => {code: string, phoneNum: string}, //(string也可以是其他你自定义的接口)
        required: true, 
        default: {}
    } 
});

const onSubmit: void = inject('onSubmit')

const step: any = inject('step')

const rows = ref(Array.from({length: len}, ()=> null))

const showKeyboard: any = ref(false)

watch(()=> form.code, (v: string)=>{
    if(form.code.length === len) {
        showKeyboard.value= false
    }
    rows.value = (v.split('') as Array<any>).concat(Array.from({length: len - v.length}, ()=> null))
})

watch([showKeyboard], (val: any) => {
    if(val[0] === false) {
        paddingBottom.value = 0
    } else {
        paddingBottom.value = 242
    }
    setTimeout(()=>{
        window.scrollTo(0, 242)
    }, 300)
})

const onFailed: void = inject('onFailed')

//验证密码必须6及以上，并且包含数字,字母,特殊字符
const vaildCode = (pwd: string) => {
    return new Promise((resolve: any) => {
        resolve(pwd.length === len);
    })
}

</script>

<style lang="less" scoped>
.main-register-step3 {
    .img {
        transform: rotate(17.23deg)
    }
    .form {
        margin-top: 40px;
        h3 {
            font-weight: bold;
            font-size: 20px;
            line-height: 24px;
            color: #7F4E1D;
        }
        .tip {
            font-size: 16px;
            line-height: 19px;
            color: #7F4E1D;
            &.w8 {
                padding-bottom: 40px;
            }
        }
        section {
            display: flex;
            padding: 20px 0px;
            .input {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 50px;
                width: 20%;
                font-size: 24px;
                color: #7F4E1D;
                font-weight: bold;
                &.no-data {
                    &:after {
                        content: '';
                        width: 70%;
                        height: 3px;
                        background:  #7F4E1D;
                    }
                }
            }
        }
    }
}



</style>
